<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.hinttoggle.min.js"></script>
<link rel="stylesheet" href="demo.css">
<script type="text/javascript">

$(document).ready(function(){
	$('input').hinttoggle();
	$($('input')[1]).hinttoggle({blurValue:'Values set from js',focusValue:'http://www.'});
	$($('input')[2]).hinttoggle({css:'otherhint hinttoggle'});
	
	$($('input')[3]).hinttoggle({css:""}).removeClass('hinttoggle');
});

</script>
</head>
<body>
<h1>Documentation</h1>
<p>Describes the short and stout documentation of this plugin</p>
<h2>Options</h2>
The options that can be passed are:
<h3>css</h3>
<p>The CSS classes to be toggled between, if more than one class, separate by space "classone classtwo", you can also specify "" if no toggling should occur.</p>
<p>Remember that each time you call the function with an element, the default css class "hinttoggle" is written. You can easily remove the class after the toggle.</p>
<h3>blurValue</h3>
<p>This value is what is to be set when an item is 'unfocused' or deselected</p>
<p>The default is ""</p>
<h3>focusValue</h3>
<p>
A value that is to be set when the field is focused, in the example below, on one field the focusvalue "http://www." is set. in case you want some predefined data.
</p>

<form>
<input type="input" value="normal value" />
<input type="input" />
<input type="input" value="another class" />
<input type="input" value="no CSS toggling" />
</form>
<h2>Download</h2>
<a href='http://code.google.com/p/hinttoggle/source/browse/trunk/jquery.hinttoggle.min.js'>Minified version</a><br />
<a href='http://code.google.com/p/hinttoggle/source/browse/trunk/jquery.hinttoggle.js'>Bulky version</a><br />
<a href='http://code.google.com/p/hinttoggle/source/browse/trunk/demo.css'>The CSS file...</a><br />
<h5>This is the code used (in case you don't want to view the source)</h5>
<pre>
$(document).ready(function(){
	$('input').hinttoggle();
	$($('input')[1]).hinttoggle({blurValue:'Values set from js',focusValue:'http://www.'});
	$($('input')[2]).hinttoggle({css:'otherhint hinttoggle'});
	
	$($('input')[3]).hinttoggle({css:""}).removeClass('hinttoggle');
});

&lt;form&gt;
&lt;input type="input" value="normal value" /&gt;
&lt;input type="input" /&gt;
&lt;input type="input" value="another class" /&gt;
&lt;input type="input" value="no CSS toggling" /&gt;
&lt;/form&gt;
</pre>
</body>
